<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style type="text/css">
    html, body { scroll-behavior:smooth; }
    svg:not(:root).svg-inline--fa {
      overflow: visible
    }

    .svg-inline--fa {
      display: inline-block;
      font-size: inherit;
      height: 1em;
      overflow: visible;
      vertical-align: -.125em
    }

    .svg-inline--fa.fa-lg {
      vertical-align: -.225em
    }

    .svg-inline--fa.fa-w-1 {
      width: .0625em
    }

    .svg-inline--fa.fa-w-2 {
      width: .125em
    }

    .svg-inline--fa.fa-w-3 {
      width: .1875em
    }

    .svg-inline--fa.fa-w-4 {
      width: .25em
    }

    .svg-inline--fa.fa-w-5 {
      width: .3125em
    }

    .svg-inline--fa.fa-w-6 {
      width: .375em
    }

    .svg-inline--fa.fa-w-7 {
      width: .4375em
    }

    .svg-inline--fa.fa-w-8 {
      width: .5em
    }

    .svg-inline--fa.fa-w-9 {
      width: .5625em
    }

    .svg-inline--fa.fa-w-10 {
      width: .625em
    }

    .svg-inline--fa.fa-w-11 {
      width: .6875em
    }

    .svg-inline--fa.fa-w-12 {
      width: .75em
    }

    .svg-inline--fa.fa-w-13 {
      width: .8125em
    }

    .svg-inline--fa.fa-w-14 {
      width: .875em
    }

    .svg-inline--fa.fa-w-15 {
      width: .9375em
    }

    .svg-inline--fa.fa-w-16 {
      width: 1em
    }

    .svg-inline--fa.fa-w-17 {
      width: 1.0625em
    }

    .svg-inline--fa.fa-w-18 {
      width: 1.125em
    }

    .svg-inline--fa.fa-w-19 {
      width: 1.1875em
    }

    .svg-inline--fa.fa-w-20 {
      width: 1.25em
    }

    .svg-inline--fa.fa-pull-left {
      margin-right: .3em;
      width: auto
    }

    .svg-inline--fa.fa-pull-right {
      margin-left: .3em;
      width: auto
    }

    .svg-inline--fa.fa-border {
      height: 1.5em
    }

    .svg-inline--fa.fa-li {
      width: 2em
    }

    .svg-inline--fa.fa-fw {
      width: 1.25em
    }

    .fa-layers svg.svg-inline--fa {
      bottom: 0;
      left: 0;
      margin: auto;
      position: absolute;
      right: 0;
      top: 0
    }

    .fa-layers {
      display: inline-block;
      height: 1em;
      position: relative;
      text-align: center;
      vertical-align: -.125em;
      width: 1em
    }

    .fa-layers svg.svg-inline--fa {
      -webkit-transform-origin: center center;
      transform-origin: center center
    }

    .fa-layers-counter,
    .fa-layers-text {
      display: inline-block;
      position: absolute;
      text-align: center
    }

    .fa-layers-text {
      left: 50%;
      top: 50%;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      -webkit-transform-origin: center center;
      transform-origin: center center
    }

    .fa-layers-counter {
      background-color: #ff253a;
      border-radius: 1em;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      color: #fff;
      height: 1.5em;
      line-height: 1;
      max-width: 5em;
      min-width: 1.5em;
      overflow: hidden;
      padding: .25em;
      right: 0;
      text-overflow: ellipsis;
      top: 0;
      -webkit-transform: scale(.25);
      transform: scale(.25);
      -webkit-transform-origin: top right;
      transform-origin: top right
    }

    .fa-layers-bottom-right {
      bottom: 0;
      right: 0;
      top: auto;
      -webkit-transform: scale(.25);
      transform: scale(.25);
      -webkit-transform-origin: bottom right;
      transform-origin: bottom right
    }

    .fa-layers-bottom-left {
      bottom: 0;
      left: 0;
      right: auto;
      top: auto;
      -webkit-transform: scale(.25);
      transform: scale(.25);
      -webkit-transform-origin: bottom left;
      transform-origin: bottom left
    }

    .fa-layers-top-right {
      right: 0;
      top: 0;
      -webkit-transform: scale(.25);
      transform: scale(.25);
      -webkit-transform-origin: top right;
      transform-origin: top right
    }

    .fa-layers-top-left {
      left: 0;
      right: auto;
      top: 0;
      -webkit-transform: scale(.25);
      transform: scale(.25);
      -webkit-transform-origin: top left;
      transform-origin: top left
    }

    .fa-lg {
      font-size: 1.33333em;
      line-height: .75em;
      vertical-align: -.0667em
    }

    .fa-xs {
      font-size: .75em
    }

    .fa-sm {
      font-size: .875em
    }

    .fa-1x {
      font-size: 1em
    }

    .fa-2x {
      font-size: 2em
    }

    .fa-3x {
      font-size: 3em
    }

    .fa-4x {
      font-size: 4em
    }

    .fa-5x {
      font-size: 5em
    }

    .fa-6x {
      font-size: 6em
    }

    .fa-7x {
      font-size: 7em
    }

    .fa-8x {
      font-size: 8em
    }

    .fa-9x {
      font-size: 9em
    }

    .fa-10x {
      font-size: 10em
    }

    .fa-fw {
      text-align: center;
      width: 1.25em
    }

    .fa-ul {
      list-style-type: none;
      margin-left: 2.5em;
      padding-left: 0
    }

    .fa-ul>li {
      position: relative
    }

    .fa-li {
      left: -2em;
      position: absolute;
      text-align: center;
      width: 2em;
      line-height: inherit
    }

    .fa-border {
      border: solid .08em #eee;
      border-radius: .1em;
      padding: .2em .25em .15em
    }

    .fa-pull-left {
      float: left
    }

    .fa-pull-right {
      float: right
    }

    .fa.fa-pull-left,
    .fab.fa-pull-left,
    .fal.fa-pull-left,
    .far.fa-pull-left,
    .fas.fa-pull-left {
      margin-right: .3em
    }

    .fa.fa-pull-right,
    .fab.fa-pull-right,
    .fal.fa-pull-right,
    .far.fa-pull-right,
    .fas.fa-pull-right {
      margin-left: .3em
    }

    .fa-spin {
      -webkit-animation: fa-spin 2s infinite linear;
      animation: fa-spin 2s infinite linear
    }

    .fa-pulse {
      -webkit-animation: fa-spin 1s infinite steps(8);
      animation: fa-spin 1s infinite steps(8)
    }

    @-webkit-keyframes fa-spin {
      0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
      }

      100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
      }
    }

    @keyframes fa-spin {
      0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
      }

      100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
      }
    }

    .fa-rotate-90 {
      -webkit-transform: rotate(90deg);
      transform: rotate(90deg)
    }

    .fa-rotate-180 {
      -webkit-transform: rotate(180deg);
      transform: rotate(180deg)
    }

    .fa-rotate-270 {
      -webkit-transform: rotate(270deg);
      transform: rotate(270deg)
    }

    .fa-flip-horizontal {
      -webkit-transform: scale(-1, 1);
      transform: scale(-1, 1)
    }

    .fa-flip-vertical {
      -webkit-transform: scale(1, -1);
      transform: scale(1, -1)
    }

    .fa-flip-horizontal.fa-flip-vertical {
      -webkit-transform: scale(-1, -1);
      transform: scale(-1, -1)
    }

    :root .fa-flip-horizontal,
    :root .fa-flip-vertical,
    :root .fa-rotate-180,
    :root .fa-rotate-270,
    :root .fa-rotate-90 {
      -webkit-filter: none;
      filter: none
    }

    .fa-stack {
      display: inline-block;
      height: 2em;
      position: relative;
      width: 2.5em
    }

    .fa-stack-1x,
    .fa-stack-2x {
      bottom: 0;
      left: 0;
      margin: auto;
      position: absolute;
      right: 0;
      top: 0
    }

    .svg-inline--fa.fa-stack-1x {
      height: 1em;
      width: 1.25em
    }

    .svg-inline--fa.fa-stack-2x {
      height: 2em;
      width: 2.5em
    }

    .fa-inverse {
      color: #fff
    }

    .sr-only {
      border: 0;
      clip: rect(0, 0, 0, 0);
      height: 1px;
      margin: -1px;
      overflow: hidden;
      padding: 0;
      position: absolute;
      width: 1px
    }

    .sr-only-focusable:active,
    .sr-only-focusable:focus {
      clip: auto;
      height: auto;
      margin: 0;
      overflow: visible;
      position: static;
      width: auto
    }
  </style>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/froala/design-blocks@master/dist/css/froala_blocks.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/froala-editor@2.9.1/css/froala_editor.pkgd.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/froala-editor@2.9.1/css/froala_style.min.css">
  <style>
    a:hover {
      color: #339ef7;
    }
  </style>
</head>

<body>
  <a href="https://your-url" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
  <header data-block-type="headers" data-id="12" class="">
    <div class="container">
      <nav class="navbar navbar-expand-lg">
        <a class="navbar-brand" href="https://www.xieyezi.com">
          <img src="https://cdn.xieyezi.com/logo1.png" height="30" alt="image">
        </a>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav5"
          aria-controls="navbarNav5" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarNav5">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
              <a class="nav-link fr-view" href="#" style="outline: none; display: inline-block;">首页<span
                  class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#jishu" style="outline: none; display: inline-block;">技术</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#preview" style="outline: none; display: inline-block;">预览</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#help" style="outline: none; display: inline-block;">铭谢</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#about" style="outline: none; display: inline-block;">关于</a>
            </li>
          </ul>
          <a class="btn ml-md-3" href="https://github.com/xieyezi/myMusic" target="_Blank">
            <img alt="image" style="height: 40px;width:40px"
              src="https://cdn.jsdelivr.net/gh/froala/design-blocks@2.0.1/dist/imgs//icons/github.svg">
          </a>
        </div>
      </nav>
    </div>
  </header>
  <section class="fdb-block" data-block-type="features" data-id="5">
    <div class="container">
      <div class="row justify-content-center pb-xl-5">
        <div class="col-12 col-md-8 text-center" style="z-index: 10000;"><a href="https://www.xieyezi.com">
            <h1>时刻音乐</h1>
          </a>
          <p class="lead">利用Vue+Webpack+Nginx构建的在线音乐Web App.</p>
        </div>
      </div>

      <div class="row text-right align-items-center-lg align-items-end pt-5">
        <div class="col-7 col-sm-4 m-auto mb-md-0 mt-md-0 m-lg-auto" style="z-index: 10000;">
          <p><img alt="image" class="img-fluid"
              src="https://cdn.jsdelivr.net/gh/froala/design-blocks@2.0.1/dist/imgs//draws/simple-iphone.svg"></p>
        </div>

        <div class="col-12 col-md-7 col-lg-6 col-xl-5 m-auto text-left pt-5 pt-md-0" style="z-index: 10000;">
          <h3><strong>免安装</strong></h3>
          <p>利用浏览器打开,可直接点击添加至桌面,接着你会在桌面发现时刻音乐的图标,这一切就像你添加小程序一样简单.</p>
          <h3 class="mt-4 mt-xl-5"><strong>随时用</strong></h3>
          <p>你可以点击已经添加至桌面的图标,或者通过扫描二维码的方式在任何平台使用时刻音乐.</p>
          <h3 class="mt-4 mt-xl-5"><strong>响应快</strong></h3>
          <p>所有美好的事情都会在5s内展现在你的眼前,你可以体验近乎接近原生App的精彩世界.</p>
        </div>
      </div>
    </div>
  </section>
  <section class="fdb-block" id="jishu" data-block-type="features" data-id="3">
    <div class="container">
      <div class="row text-center py-5">
        <div class="col fr-box" role="application" style="z-index: 10000;">
          <div class="fr-wrapper" dir="auto">
            <div class="fr-element fr-view" dir="auto" aria-disabled="false" spellcheck="true">
              <h1>技术</h1>
            </div>
          </div>
        </div>
      </div>
      <div class="row text-lg-right align-items-center">
        <div class="col-12 col-sm-6 col-lg-3" style="z-index: 10000;">
          <p><img alt="image" class="fdb-icon fr-fic fr-dii" src="https://cdn.xieyezi.com/Vue.svg"></p>
          <h4><strong>Vue、Vue-Router、VueX</strong></h4>
          <p>包括Vue-Router、VueX、Vue-Cli</p>
          <p><img alt="image" class="fdb-icon mt-3 mt-xl-5 fr-fic fr-dii" src="https://cdn.xieyezi.com/node.svg"></p>
          <h4><strong>Node.js</strong></h4>
          <p>利用伪造请求头,爬取网易云音乐接口,封装为Node API</p>
          <p><img alt="image" class="fdb-icon mt-3 mt-xl-5 fr-fic fr-dii" src="https://cdn.xieyezi.com/Webpack.svg"></p>
          <h4><strong>Webpack、Rollup</strong></h4>
          <p>利用Webpack进行项目打包,利用rollup进行模块打包</p>
        </div>

        <div class="col-12 col-sm-6 col-lg-3 text-left pt-3 pt-sm-0 order-lg-12" style="z-index: 10000;">
          <p><img alt="image" class="fdb-icon" src="https://cdn.xieyezi.com/JavaScript.svg"></p>
          <h4><strong>ES6</strong></h4>
          <p>均采用ES6进行开发</p>
          <p><img alt="image" class="fdb-icon mt-3 mt-xl-5" src="https://cdn.xieyezi.com/nginx.svg"></p>
          <h4><strong>Nginx</strong></h4>
          <p>利用Nginx作为反向代理服务器</p>
          <p><img alt="image" class="fdb-icon mt-3 mt-xl-5" src="https://cdn.xieyezi.com/Docker.png"></p>
          <h4><strong>docker</strong></h4>
          <p>dockr-compose一键部署</p>
        </div>

        <div class="col-7 col-sm-4 col-lg-4 m-auto pt-5 pt-lg-0 order-lg-1" style="z-index: 10000;">
          <p><img alt="image" class="img-fluid"
              src="https://cdn.jsdelivr.net/gh/froala/design-blocks@2.0.1/dist/imgs//draws/simple-iphone.svg"></p>
        </div>
      </div>
    </div>
  </section>
  <section class="fdb-block py-0 fp-active" id="preview" data-block-type="pricings" data-id="7">
    <div class="container pt-5 my-5"
      style="background-image: url(https://cdn.jsdelivr.net/gh/froala/design-blocks@2.0.1/dist/imgs//shapes/2.svg)">
      <div class="row text-center py-5">
        <div class="col fr-box" role="application" style="z-index: 10000;">
          <div class="fr-wrapper" dir="auto">
            <div class="fr-element fr-view" dir="auto" aria-disabled="false" spellcheck="true">
              <h1>预览</h1>
            </div>
          </div>
        </div>
      </div>

      <div class="row py-5 align-items-top">
        <div class="col-12 col-sm-10 col-md-8 m-auto col-lg-4 text-left" style="z-index: 10000;">
          <div class="bg-gray pb-5 pt-5 pl-4 pr-4 rounded shadow">
            <img alt="image" style="width: 100%;height:100%" src="https://i.loli.net/2019/06/08/5cfbd9f65750865860.png">
          </div>
        </div>

        <div class="col-12 col-sm-10 col-md-8 m-auto col-lg-4 text-left pt-4 pt-lg-0" style="z-index: 10000;">
          <div class="bg-gray pb-5 pt-5 pl-4 pr-4 rounded shadow">
            <img alt="image" style="width: 100%;height:100%" src="https://i.loli.net/2019/06/08/5cfbd9f7039ea19436.png">
          </div>
        </div>

        <div class="col-12 col-sm-10 col-md-8 m-auto col-lg-4 text-left pt-4 pt-lg-0" style="z-index: 10000;">
          <div class="bg-gray pb-5 pt-5 pl-4 pr-4 rounded shadow">
            <img alt="image" style="width: 100%;height:100%" src="https://i.loli.net/2019/06/08/5cfbd9f7d1a1551083.png">
          </div>
        </div>
      </div>
    </div>
  </section>
  <section class="fdb-block fp-active" data-block-type="contents" data-id="1">
    <div class="container">
      <div class="row align-items-center">
        <div class="col-12 col-md-8 col-lg-8" style="z-index: 10000;"><h1>一起来体验一下吧</h1><p class="lead">用任何可以扫描二维码的平台扫描右方的二维码,即可使用时刻音乐🎵</p></div>
        <div class="col-12 col-md-4 ml-md-auto mt-4 mt-md-0" style="z-index: 10000;"><p><img alt="image" class="img-fluid" src="https://cdn.xieyezi.com/%E9%9F%B3%E4%B9%90%E4%BA%8C%E7%BB%B4%E7%A0%81.png"></p></div>
      </div>
    </div>
  </section>
  <section class="fdb-block team-2" id="help" data-block-type="teams" data-id="8">
    <div class="container">
      <div class="row text-center justify-content-center">
        <div class="col-8" style="z-index: 10000;">
          <h1>特别铭谢</h1>
        </div>
      </div>

      <div class="row-50"></div>

      <div class="row text-center justify-content-center">
        <div class="col-sm-3 m-sm-auto" style="z-index: 10000;">
          <p><img alt="image" class="img-fluid rounded-circle"
              src="https://i.loli.net/2019/06/08/5cfbdaaf17a7879604.jpg"></p>
          <h2>王柯柯</h2>
          <p>指导老师</p>
        </div>

        <div class="col-sm-3 m-sm-auto" style="z-index: 10000;">
          <p><img alt="image" class="img-fluid rounded-circle" src="https://i.loli.net/2019/06/08/5cfbdab13497575412.jpg"></p>
          <h2>樊勇</h2>
          <p>连尚科技前端工程师</p>
        </div>

        <div class="col-sm-3 m-sm-auto" style="z-index: 10000;">
          <p><img alt="image" class="img-fluid rounded-circle"
              src="https://avatars3.githubusercontent.com/u/12221718?s=460&v=4"></p>
          <h2>Binaryify</h2>
          <p>JS前端开发联盟</p>
        </div>
      </div>
    </div>
  </section>
  <section class="fdb-block" data-block-type="contents" data-id="13">
    <div class="container">
      <div class="row">
        <div class="col text-center fr-box" role="application" style="z-index: 10000;">
          <div class="fr-wrapper" dir="auto">
            <div class="fr-element fr-view" dir="auto" aria-disabled="false" spellcheck="true">
              <h1>站在巨人的肩膀上</h1>
            </div>
          </div>
        </div>
      </div>

      <div class="row pt-5 justify-content-center align-items-center">
        <div class="col-6 col-md-2" style="z-index: 10000;">
          <p><img alt="image" class="img-fluid"
              src="https://cdn.jsdelivr.net/gh/froala/design-blocks@2.0.1/dist/imgs//shapes/1.svg"></p>
        </div>
        <div class="col-6 col-md-2 offset-md-1" style="z-index: 10000;">
          <p><img alt="image" class="img-fluid"
              src="https://cdn.jsdelivr.net/gh/froala/design-blocks@2.0.1/dist/imgs//shapes/5.svg"></p>
        </div>
        <div class="col-6 col-md-2 mt-4 mt-md-0 offset-md-1" style="z-index: 10000;">
          <p><img alt="image" class="img-fluid"
              src="https://cdn.jsdelivr.net/gh/froala/design-blocks@2.0.1/dist/imgs//shapes/7.svg"></p>
        </div>
        <div class="col-6 col-md-2 mt-4 mt-md-0 offset-md-1" style="z-index: 10000;">
          <p><img alt="image" class="img-fluid"
              src="https://cdn.jsdelivr.net/gh/froala/design-blocks@2.0.1/dist/imgs//shapes/4.svg"></p>
        </div>
      </div>
    </div>
  </section>
  <footer class="fdb-block footer-large" data-block-type="footers" data-id="10">
    <div class="container" id="about">
      <div class="row text-center">
        <div class="col fr-box" role="application" style="z-index: 10000;">
          <div class="fr-wrapper" dir="auto">
            <div class="fr-element fr-view" dir="auto" aria-disabled="false" spellcheck="true">
              <h3>写夜子</h3>
              <p>成都,中国</p>
              <p><a href="https://xieyezi.xyz/">我的博客</a></p>
              <p><a href="mailto:1435398529@qq.com">suyechun666@qq.com</a></p>
            </div>
          </div>
        </div>
      </div>

      <div class="row mt-4">
        <div class="col text-center fr-box" role="application" style="z-index: 10000;">
          <div class="fr-wrapper" dir="auto">
            <div class="fr-element fr-view" dir="auto" aria-disabled="false" spellcheck="true">
              <p class="lead"><a class="mx-2" href="https://www.froala.com">
                  <!-- <i class="fab fa-twitter" aria-hidden="true"></i> --></a> <a class="mx-2"
                  href="https://www.froala.com">
                  <!-- <i class="fab fa-facebook" aria-hidden="true"></i> --></a> <a class="mx-2"
                  href="https://www.froala.com">
                  <!-- <i class="fab fa-instagram" aria-hidden="true"></i> --></a> <a class="mx-2"
                  href="https://www.froala.com">
                  <!-- <i class="fab fa-pinterest" aria-hidden="true"></i> --></a> <a class="mx-2"
                  href="https://www.froala.com">
                  <!-- <i class="fab fa-google" aria-hidden="true"></i> --></a></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </footer>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/froala-editor@2.9.1/js/froala_editor.pkgd.min.js"></script>
  <script src="https://use.fontawesome.com/releases/v5.5.0/js/all.js"></script>
  <div class="fr-toolbar fr-desktop fr-inline" style="z-index: 10001; display: none; top: 324px; left: 305.5px;"><span
      class="fr-arrow" style="margin-left: -5px;"></span><button id="bold-1" type="button" tabindex="-1" role="button"
      aria-pressed="true" title="Bold (⌘B)" class="fr-command fr-btn fr-btn-font_awesome_5 fr-active"
      data-cmd="bold"><svg class="svg-inline--fa fa-bold fa-w-12" aria-hidden="true" data-prefix="fas" data-icon="bold"
        role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" data-fa-i2svg="">
        <path fill="currentColor"
          d="M304.793 243.891c33.639-18.537 53.657-54.16 53.657-95.693 0-48.236-26.25-87.626-68.626-104.179C265.138 34.01 240.849 32 209.661 32H24c-8.837 0-16 7.163-16 16v33.049c0 8.837 7.163 16 16 16h33.113v318.53H24c-8.837 0-16 7.163-16 16V464c0 8.837 7.163 16 16 16h195.69c24.203 0 44.834-1.289 66.866-7.584C337.52 457.193 376 410.647 376 350.014c0-52.168-26.573-91.684-71.207-106.123zM142.217 100.809h67.444c16.294 0 27.536 2.019 37.525 6.717 15.828 8.479 24.906 26.502 24.906 49.446 0 35.029-20.32 56.79-53.029 56.79h-76.846V100.809zm112.642 305.475c-10.14 4.056-22.677 4.907-31.409 4.907h-81.233V281.943h84.367c39.645 0 63.057 25.38 63.057 63.057.001 28.425-13.66 52.483-34.782 61.284z">
        </path>
      </svg><!-- <i class="fas fa-bold" aria-hidden="true"></i> --><span class="fr-sr-only">Bold</span></button><button
      id="italic-1" type="button" tabindex="-1" role="button" aria-pressed="false" title="Italic (⌘I)"
      class="fr-command fr-btn fr-btn-font_awesome_5" data-cmd="italic"><svg class="svg-inline--fa fa-italic fa-w-10"
        aria-hidden="true" data-prefix="fas" data-icon="italic" role="img" xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 320 512" data-fa-i2svg="">
        <path fill="currentColor"
          d="M204.758 416h-33.849l62.092-320h40.725a16 16 0 0 0 15.704-12.937l6.242-32C297.599 41.184 290.034 32 279.968 32H120.235a16 16 0 0 0-15.704 12.937l-6.242 32C96.362 86.816 103.927 96 113.993 96h33.846l-62.09 320H46.278a16 16 0 0 0-15.704 12.935l-6.245 32C22.402 470.815 29.967 480 40.034 480h158.479a16 16 0 0 0 15.704-12.935l6.245-32c1.927-9.88-5.638-19.065-15.704-19.065z">
        </path>
      </svg><!-- <i class="fas fa-italic" aria-hidden="true"></i> --><span
        class="fr-sr-only">Italic</span></button><button id="color-1" type="button" tabindex="-1" role="button"
      title="Colors" class="fr-command fr-btn fr-btn-font_awesome_5" data-cmd="color" data-popup="true"><svg
        class="svg-inline--fa fa-tint fa-w-11" aria-hidden="true" data-prefix="fas" data-icon="tint" role="img"
        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512" data-fa-i2svg="">
        <path fill="currentColor"
          d="M205.22 22.09c-7.94-28.78-49.44-30.12-58.44 0C100.01 179.85 0 222.72 0 333.91 0 432.35 78.72 512 176 512s176-79.65 176-178.09c0-111.75-99.79-153.34-146.78-311.82zM176 448c-61.75 0-112-50.25-112-112 0-8.84 7.16-16 16-16s16 7.16 16 16c0 44.11 35.89 80 80 80 8.84 0 16 7.16 16 16s-7.16 16-16 16z">
        </path>
      </svg><!-- <i class="fas fa-tint" aria-hidden="true"></i> --><span
        class="fr-sr-only">Colors</span></button><button id="paragraphFormat-1" type="button" tabindex="-1"
      role="button" aria-controls="dropdown-menu-paragraphFormat-1" aria-expanded="false" aria-haspopup="true"
      title="Paragraph Format" class="fr-command fr-btn fr-dropdown fr-btn-font_awesome_5 fr-selection"
      data-cmd="paragraphFormat"><svg class="svg-inline--fa fa-paragraph fa-w-14" aria-hidden="true" data-prefix="fas"
        data-icon="paragraph" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg="">
        <path fill="currentColor"
          d="M408 32H177.531C88.948 32 16.045 103.335 16 191.918 15.956 280.321 87.607 352 176 352v104c0 13.255 10.745 24 24 24h32c13.255 0 24-10.745 24-24V112h32v344c0 13.255 10.745 24 24 24h32c13.255 0 24-10.745 24-24V112h40c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24z">
        </path>
      </svg><!-- <i class="fas fa-paragraph" aria-hidden="true"></i> --><span class="fr-sr-only">Paragraph
        Format</span></button>
    <div id="dropdown-menu-paragraphFormat-1" class="fr-dropdown-menu" role="listbox"
      aria-labelledby="paragraphFormat-1" aria-hidden="true">
      <div class="fr-dropdown-wrapper" role="presentation">
        <div class="fr-dropdown-content" role="presentation">
          <ul class="fr-dropdown-list" role="presentation">
            <li role="presentation">
              <p style="padding: 0 !important; margin: 0 !important;" role="presentation"><a class="fr-command"
                  tabindex="-1" role="option" data-cmd="paragraphFormat" data-param1="N" title="Normal">Normal</a></p>
            </li>
            <li role="presentation">
              <h1 style="padding: 0 !important; margin: 0 !important;" role="presentation"><a class="fr-command"
                  tabindex="-1" role="option" data-cmd="paragraphFormat" data-param1="H1" title="Heading 1">Heading
                  1</a></h1>
            </li>
            <li role="presentation">
              <h2 style="padding: 0 !important; margin: 0 !important;" role="presentation"><a class="fr-command"
                  tabindex="-1" role="option" data-cmd="paragraphFormat" data-param1="H2" title="Heading 2">Heading
                  2</a></h2>
            </li>
            <li role="presentation">
              <h3 style="padding: 0 !important; margin: 0 !important;" role="presentation"><a class="fr-command"
                  tabindex="-1" role="option" data-cmd="paragraphFormat" data-param1="H3" title="Heading 3">Heading
                  3</a></h3>
            </li>
            <li role="presentation">
              <h4 style="padding: 0 !important; margin: 0 !important;" role="presentation"><a class="fr-command"
                  tabindex="-1" role="option" data-cmd="paragraphFormat" data-param1="H4" title="Heading 4">Heading
                  4</a></h4>
            </li>
            <li role="presentation">
              <pre style="padding: 0 !important; margin: 0 !important;"
                role="presentation"><a class="fr-command" tabindex="-1" role="option" data-cmd="paragraphFormat" data-param1="PRE" title="Code">Code</a></pre>
            </li>
          </ul>
        </div>
      </div>
    </div><button id="align-1" type="button" tabindex="-1" role="button" aria-controls="dropdown-menu-align-1"
      aria-expanded="false" aria-haspopup="true" title="Align"
      class="fr-command fr-btn fr-dropdown fr-btn-font_awesome_5" data-cmd="align"><svg
        class="svg-inline--fa fa-align-right fa-w-14" aria-hidden="true" data-prefix="fas" data-icon="align-right"
        role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg="">
        <path fill="currentColor"
          d="M160 84V44c0-8.837 7.163-16 16-16h256c8.837 0 16 7.163 16 16v40c0 8.837-7.163 16-16 16H176c-8.837 0-16-7.163-16-16zM16 228h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 256h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm160-128h256c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H176c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z">
        </path>
      </svg><!-- <i class="fas fa-align-right" aria-hidden="true"></i> -->
      <!-- <i class="fas fa-align-right" aria-hidden="true"></i> -->
      <!-- <i class="fas fa-align-right" aria-hidden="true"></i> -->
      <!-- <i class="fas fa-align-right" aria-hidden="true"></i> -->
      <!-- <i class="fas fa-align-left" aria-hidden="true"></i> --><span class="fr-sr-only">Align</span></button>
    <div id="dropdown-menu-align-1" class="fr-dropdown-menu" role="listbox" aria-labelledby="align-1"
      aria-hidden="true">
      <div class="fr-dropdown-wrapper" role="presentation">
        <div class="fr-dropdown-content" role="presentation">
          <ul class="fr-dropdown-list" role="presentation">
            <li role="presentation"><a class="fr-command fr-title" tabindex="-1" role="option" data-cmd="align"
                data-param1="left" title="Align Left"><svg class="svg-inline--fa fa-align-left fa-w-14"
                  aria-hidden="true" data-prefix="fas" data-icon="align-left" role="img"
                  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg="">
                  <path fill="currentColor"
                    d="M288 44v40c0 8.837-7.163 16-16 16H16c-8.837 0-16-7.163-16-16V44c0-8.837 7.163-16 16-16h256c8.837 0 16 7.163 16 16zM0 172v40c0 8.837 7.163 16 16 16h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16zm16 312h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm256-200H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16h256c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16z">
                  </path>
                </svg><!-- <i class="fas fa-align-left" aria-hidden="true"></i> --><span class="fr-sr-only">Align
                  Left</span></a></li>
            <li role="presentation"><a class="fr-command fr-title" tabindex="-1" role="option" data-cmd="align"
                data-param1="center" title="Align Center"><svg class="svg-inline--fa fa-align-center fa-w-14"
                  aria-hidden="true" data-prefix="fas" data-icon="align-center" role="img"
                  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg="">
                  <path fill="currentColor"
                    d="M352 44v40c0 8.837-7.163 16-16 16H112c-8.837 0-16-7.163-16-16V44c0-8.837 7.163-16 16-16h224c8.837 0 16 7.163 16 16zM16 228h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 256h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm320-200H112c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16h224c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16z">
                  </path>
                </svg><!-- <i class="fas fa-align-center" aria-hidden="true"></i> --><span class="fr-sr-only">Align
                  Center</span></a></li>
            <li role="presentation"><a class="fr-command fr-title" tabindex="-1" role="option" data-cmd="align"
                data-param1="right" title="Align Right"><svg class="svg-inline--fa fa-align-right fa-w-14"
                  aria-hidden="true" data-prefix="fas" data-icon="align-right" role="img"
                  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg="">
                  <path fill="currentColor"
                    d="M160 84V44c0-8.837 7.163-16 16-16h256c8.837 0 16 7.163 16 16v40c0 8.837-7.163 16-16 16H176c-8.837 0-16-7.163-16-16zM16 228h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 256h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm160-128h256c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H176c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z">
                  </path>
                </svg><!-- <i class="fas fa-align-right" aria-hidden="true"></i> --><span class="fr-sr-only">Align
                  Right</span></a></li>
            <li role="presentation"><a class="fr-command fr-title" tabindex="-1" role="option" data-cmd="align"
                data-param1="justify" title="Align Justify"><svg class="svg-inline--fa fa-align-justify fa-w-14"
                  aria-hidden="true" data-prefix="fas" data-icon="align-justify" role="img"
                  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg="">
                  <path fill="currentColor"
                    d="M0 84V44c0-8.837 7.163-16 16-16h416c8.837 0 16 7.163 16 16v40c0 8.837-7.163 16-16 16H16c-8.837 0-16-7.163-16-16zm16 144h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 256h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0-128h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z">
                  </path>
                </svg><!-- <i class="fas fa-align-justify" aria-hidden="true"></i> --><span class="fr-sr-only">Align
                  Justify</span></a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="fr-separator fr-hs" role="separator" aria-orientation="horizontal"></div><button id="emoticons-1"
      type="button" tabindex="-1" role="button" title="Emoticons" class="fr-command fr-btn fr-btn-font_awesome_5"
      data-cmd="emoticons" data-popup="true"><svg class="svg-inline--fa fa-smile fa-w-16" aria-hidden="true"
        data-prefix="fas" data-icon="smile" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"
        data-fa-i2svg="">
        <path fill="currentColor"
          d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm80 168c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm-160 0c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm194.8 170.2C334.3 380.4 292.5 400 248 400s-86.3-19.6-114.8-53.8c-13.6-16.3 11-36.7 24.6-20.5 22.4 26.9 55.2 42.2 90.2 42.2s67.8-15.4 90.2-42.2c13.4-16.2 38.1 4.2 24.6 20.5z">
        </path>
      </svg><!-- <i class="fas fa-smile" aria-hidden="true"></i> --><span
        class="fr-sr-only">Emoticons</span></button><button id="insertLink-1" type="button" tabindex="-1" role="button"
      title="Insert Link (⌘K)" class="fr-command fr-btn fr-btn-font_awesome_5" data-cmd="insertLink"
      data-popup="true"><svg class="svg-inline--fa fa-link fa-w-16" aria-hidden="true" data-prefix="fas"
        data-icon="link" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
        <path fill="currentColor"
          d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z">
        </path>
      </svg><!-- <i class="fas fa-link" aria-hidden="true"></i> --><span class="fr-sr-only">Insert
        Link</span></button><button id="insertImage-1" type="button" tabindex="-1" role="button"
      title="Insert Image (⌘P)" class="fr-command fr-btn fr-btn-font_awesome_5" data-cmd="insertImage"
      data-popup="true"><svg class="svg-inline--fa fa-image fa-w-16" aria-hidden="true" data-prefix="fas"
        data-icon="image" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
        <path fill="currentColor"
          d="M464 448H48c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48h416c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48zM112 120c-30.928 0-56 25.072-56 56s25.072 56 56 56 56-25.072 56-56-25.072-56-56-56zM64 384h384V272l-87.515-87.515c-4.686-4.686-12.284-4.686-16.971 0L208 320l-55.515-55.515c-4.686-4.686-12.284-4.686-16.971 0L64 336v48z">
        </path>
      </svg><!-- <i class="fas fa-image" aria-hidden="true"></i> --><span class="fr-sr-only">Insert
        Image</span></button><button id="undo-1" type="button" tabindex="-1" role="button" aria-disabled="true"
      title="Undo (⌘Z)" class="fr-command fr-btn fr-btn-font_awesome_5 fr-disabled" data-cmd="undo"><svg
        class="svg-inline--fa fa-undo fa-w-16" aria-hidden="true" data-prefix="fas" data-icon="undo" role="img"
        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
        <path fill="currentColor"
          d="M212.333 224.333H12c-6.627 0-12-5.373-12-12V12C0 5.373 5.373 0 12 0h48c6.627 0 12 5.373 12 12v78.112C117.773 39.279 184.26 7.47 258.175 8.007c136.906.994 246.448 111.623 246.157 248.532C504.041 393.258 393.12 504 256.333 504c-64.089 0-122.496-24.313-166.51-64.215-5.099-4.622-5.334-12.554-.467-17.42l33.967-33.967c4.474-4.474 11.662-4.717 16.401-.525C170.76 415.336 211.58 432 256.333 432c97.268 0 176-78.716 176-176 0-97.267-78.716-176-176-176-58.496 0-110.28 28.476-142.274 72.333h98.274c6.627 0 12 5.373 12 12v48c0 6.627-5.373 12-12 12z">
        </path>
      </svg><!-- <i class="fas fa-undo" aria-hidden="true"></i> --><span class="fr-sr-only">Undo</span></button><button
      id="redo-1" type="button" tabindex="-1" role="button" aria-disabled="true" title="Redo (⌘⇧Z)"
      class="fr-command fr-btn fr-btn-font_awesome_5 fr-disabled" data-cmd="redo"><svg
        class="svg-inline--fa fa-redo fa-w-16" aria-hidden="true" data-prefix="fas" data-icon="redo" role="img"
        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
        <path fill="currentColor"
          d="M500.333 0h-47.411c-6.853 0-12.314 5.729-11.986 12.574l3.966 82.759C399.416 41.899 331.672 8 256.001 8 119.34 8 7.899 119.526 8 256.187 8.101 393.068 119.096 504 256 504c63.926 0 122.202-24.187 166.178-63.908 5.113-4.618 5.354-12.561.482-17.433l-33.971-33.971c-4.466-4.466-11.64-4.717-16.38-.543C341.308 415.448 300.606 432 256 432c-97.267 0-176-78.716-176-176 0-97.267 78.716-176 176-176 60.892 0 114.506 30.858 146.099 77.8l-101.525-4.865c-6.845-.328-12.574 5.133-12.574 11.986v47.411c0 6.627 5.373 12 12 12h200.333c6.627 0 12-5.373 12-12V12c0-6.627-5.373-12-12-12z">
        </path>
      </svg><!-- <i class="fas fa-redo" aria-hidden="true"></i> --><span class="fr-sr-only">Redo</span></button>
  </div>

</body>

</html>
